<template>
	<view class="container">
		<!-- #ifdef MP-WEIXIN -->
		<view class="status_bar" :style="'height:'+tophight.top+'px;'"></view>
		<view class="status_title" :style="'height:'+tophight.height+'px;'">
			<view @click="onBack()">
				<image class="back-image" src="https://jht-public.oss-cn-shenzhen.aliyuncs.com/2024/9/99510d9b-3884-4562-8fe4-4c0f4f40cad5.png"></image>
			</view>
			<text>舌诊报告</text>
		</view>
		<!-- #endif -->
		<view class="header">
			<view class="h-left">
				<view class="avatar">
					<u-image src="https://jht-public.oss-cn-shenzhen.aliyuncs.com/2024/8/a4404efd-7f45-450c-823e-06719c449c57.png" shape="circle"></u-image>
				</view>
				<view class="user-info">
					<view class="name">{{userdata.nickName || ''}}</view>
					<view class="date">{{detail.createTime || ''}}</view>
				</view>
			</view>
			<view class="h-right" @click="previewImage(detail.tongue.imageOrigin)">
				<u-image src="https://jht-public.oss-cn-shenzhen.aliyuncs.com/2024/8/65ba196c-4d66-4615-a4d4-eea58ece1619.png" shape="circle"></u-image>
			</view>
		</view>
		<view class="banner">
			<u-image :src="detail.tongue.image" shape="circle"></u-image>
			<!-- <u-image class="image" :src="https://jht-public.oss-cn-shenzhen.aliyuncs.com/2024/8/623590db-b046-4d67-87b7-e8bb0e238be9.png" shape="circle"></u-image> -->
			<view class="banner-item1">舌色：{{detail.diagnose.sheSe || ''}}</view>
			<view class="banner-item2">苔质：{{detail.diagnose.taiZhi || ''}}</view>
			<view class="banner-item3">苔色：{{detail.diagnose.sheTaiYanSe || ''}}</view>
			<view class="banner-item4">舌形：{{detail.diagnose.sheXing || ''}}</view>
		</view>
		<view class="footer">
			<view class="tab-view">
				<view class="tab-btn">
					<view class="tab-item" :class="{'active':index == num}" v-for="(item,index) in tabData" :key="index" @click="changeTab(index)">
						<text>{{item}}</text>
						<view class="line" v-show="num == index"></view>
					</view>
				</view>
			</view>
			<!-- 诊断结果 -->
			<view class="result-view" v-if="num == 0">
				<!-- <scroll-view class="scroll"> -->
					<view class="head">
						<view class="h-left">
							<image class="icon-tongue" src="../static/image/icon-tongue.png" mode=""></image>
							<view class="label">诊断结果</view>
							<view class="status">良好</view>
						</view>
						<view class="score">98分</view>
					</view>
					<view class="title">{{detail.diagnose.zhengHou || ''}}</view>
					<view class="value">舌色浅淡，苔薄白，此由中阳不运，水湿之气上滋所致，兼见齿痕舌，主脾虚湿盛。常见症状:白带量多，色白或淡黄，质稠无味，绵绵不断，面色萎黄，四肢不温，神倦乏力，小腿浮肿，舌淡，苔白或腻，脉缓而弱。</view>
					<view class="result-list">
						<view class="result-item">
							<view class="result-t">
								<view class="result-h">
									<view class="result-h-l">
										舌色：<text>{{detail.diagnose.sheSe || ''}}</text>
									</view>
									<view class="result-status">
										<image class="status-image" src="https://jht-public.oss-cn-shenzhen.aliyuncs.com/2024/8/c8e346cc-ea09-4488-a9e4-504bc572904c.png"></image>
										<text class="error">异常</text>
									</view>
								</view>
								<view class="line-progress">
									<view class="line1"></view>
									<view class="round"></view>
									<view class="line-value1">
										<view class="line-value-item">淡白</view>
										<view class="line-value-item">淡红</view>
										<view class="line-value-item">红</view>
										<view class="line-value-item">绛红</view>
										<view class="line-value-item">青紫</view>
									</view>
								</view>
							</view>
							<view class="result-b">
								<view class="label">症状：{{detail.diagnose.sheSeKeyword || ''}}</view>
								<view class="explain">说明：{{detail.diagnose.sheSeExplain || ''}}</view>
							</view>
						</view>
						<view class="result-item">
							<view class="result-t">
								<view class="result-h">
									<view class="result-h-l">
										舌形：<text>{{detail.diagnose.sheXing || ''}}</text>
									</view>
									<view class="result-status">
										<image class="status-image" src="https://jht-public.oss-cn-shenzhen.aliyuncs.com/2024/8/42664274-6c95-449e-868c-da221b96e5e3.png"></image>
										<text class="validity">正常</text>
									</view>
								</view>
							</view>
							<view class="result-b">
								<view class="label">症状：{{detail.diagnose.sheXingKeyword || ''}}</view>
								<view class="explain">说明：{{shexingDescription || ''}}</view>
							</view>
						</view>
						<view class="result-item">
							<view class="result-t">
								<view class="result-h">
									<view class="result-h-l">
										苔色：<text>{{detail.diagnose.sheTaiYanSe || ''}}</text>
									</view>
									<view class="result-status">
										<image class="status-image" src="https://jht-public.oss-cn-shenzhen.aliyuncs.com/2024/8/42664274-6c95-449e-868c-da221b96e5e3.png"></image>
										<text class="validity">正常</text>
									</view>
								</view>
								<view class="line-progress">
									<view class="line2"></view>
									<view class="round"></view>
									<view class="line-value2">
										<view class="line-value-item">白苔</view>
										<view class="line-value-item">黄苔</view>
										<view class="line-value-item">灰黑苔</view>
									</view>
								</view>
							</view>
							<view class="result-b">
								<view class="label">症状：{{detail.diagnose.taiSeKeyword || ''}}</view>
								<view class="explain">说明：{{detail.diagnose.taiSeExplain || ''}}</view>
							</view>
						</view>
						<view class="result-item">
							<view class="result-t">
								<view class="result-h">
									<view class="result-h-l">
										苔质：<text>{{detail.diagnose.taiZhi || ''}}</text>
									</view>
									<view class="result-status">
										<image class="status-image" src="https://jht-public.oss-cn-shenzhen.aliyuncs.com/2024/8/42664274-6c95-449e-868c-da221b96e5e3.png"></image>
										<text class="validity">正常</text>
									</view>
								</view>
							</view>
							<view class="result-b">
								<view class="label">症状：{{detail.diagnose.taiZhiKeyword || ''}}</view>
								<view class="explain">说明：{{taizhiDescription || ''}}</view>
							</view>
						</view>
					</view>
					<view class="tip">
						注：报告仅供参考，具体情况以医生建议为准.
					</view>
				<!-- </scroll-view> -->
			</view>
			<!-- 调理建议 -->
			<view class="suggest-view" v-if="num == 1">
				<view class="tab-wrap">
					<u-tabs :list="list" lineColor="#ff702a" lineWidth="40" :inactiveStyle="{color:'#5B5E63'}" :activeStyle="{fontWeight: 'bold',color: '#32363C'}" @change="onTabChange"></u-tabs>
				</view>
				<view class="medicated-view" style="margin-bottom: 0rpx;" id="id1">
					<text class="label">【{{tab1.categoryName}}】</text>
					<view class="medicated-list">
						<view class="medicated-item">
							<view class="medicated-head">
								<view class="medicated-head-l">
									<text class="name">{{tab1.ysName}}</text>
									<text class="dec">{{tab1.effect}}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
				<!-- 饮食 -->
				<!-- <view class="suggest-item" id="section1">
					<view class="label">【饮食】</view>
					<view class="value">避免食用各种致敏食物，减少发作机会。可选用具有健脾益气作用的食物食用，如粳米、猪肚、鸡肉、鸡蛋。</view>
				</view> -->
				<!-- 药膳 -->
				<view class="medicated-view" style="margin-top: 0rpx;" id="id2">
					<text class="label">【{{tab2.categoryName}}】</text>
					<view class="medicated-list">
						<view class="medicated-item">
							<view class="medicated-head">
								<view class="medicated-head-l">
									<text class="name">{{tab2.ysName}}</text>
									<text class="dec">{{tab2.effect}}</text>
								</view>
							</view>
							<view class="practice">
								做法：{{tab2.practice}}
							</view>
						</view>
					</view>
				</view>
				<view class="medicated-view" id="id3">
					<text class="label">【{{tab3.categoryName}}】</text>
					<view class="medicated-list">
						<view class="medicated-item">
							<view class="medicated-head">
								<view class="medicated-head-l">
									<text class="name">{{tab3.ysName}}</text>
									<text class="dec">{{tab3.effect}}</text>
								</view>
							</view>
							<view class="practice">
								做法：{{tab3.practice}}
							</view>
						</view>
					</view>
				</view>
				<view class="medicated-view" id="id4">
					<text class="label">【{{tab4.categoryName}}】</text>
					<view class="medicated-list">
						<view class="medicated-item">
							<view class="medicated-head" style="margin-bottom: 20rpx;">
								<view class="medicated-head-l">
									<text class="name">{{tab4.ysName}}</text>
								</view>
							</view>
							<view class="practice">
								{{tab4.practice}}
							</view>
						</view>
					</view>
				</view>
				<view class="medicated-view" id="id5">
					<text class="label">【{{tab5.categoryName}}】</text>
					<view class="medicated-list">
						<view class="medicated-item">
							<view class="medicated-head" style="margin-bottom: 20rpx;">
								<view class="medicated-head-l">
									<text class="name">{{tab5.ysName}}</text>
								</view>
							</view>
							<view class="practice">
								{{tab5.principle}}
							</view>
						</view>
					</view>
				</view>
				<view class="medicated-view" id="id6">
					<text class="label">【{{tab6.categoryName}}】</text>
					<view class="medicated-list">
						<view class="medicated-item">
							<view class="medicated-head" style="margin-bottom: 20rpx;">
								<view class="medicated-head-l">
									<text class="name">{{tab6.ysName}}</text>
								</view>
							</view>
							<view class="practice">
								{{tab6.position}}{{tab6.principle}}
							</view>
						</view>
					</view>
				</view>
				<view class="medicated-view" id="id7">
					<text class="label">【{{tab7.categoryName}}】</text>
					<view class="medicated-list">
						<view class="medicated-item">
							<view class="medicated-head" style="margin-bottom: 20rpx;">
								<view class="medicated-head-l">
									<text class="name">{{tab7.ysName}}</text>
								</view>
							</view>
							<view class="practice">
								{{tab7.position}}{{tab7.principle}}
							</view>
						</view>
					</view>
				</view>
				<view class="medicated-view" id="id8">
					<text class="label">【{{tab8.categoryName}}】</text>
					<view class="medicated-list">
						<view class="medicated-item">
							<view class="medicated-head" style="margin-bottom: 20rpx;">
								<view class="medicated-head-l">
									<text class="name">{{tab8.ysName}}</text>
								</view>
							</view>
							<view class="practice">
								{{tab8.position}}{{tab8.principle}}
							</view>
						</view>
					</view>
				</view>
				<!-- 运动 -->
				<!-- <view class="suggest-item" id="section3">
					<view class="label">【运动】</view>
					<view class="value">宜比较柔缓的运动，推荐八段锦、慢跑、健步走等。</view>
				</view> -->
				<!-- 情志 -->
				<!-- <view class="suggest-item" id="section4">
					<view class="label">【情志】</view>
					<view class="value">过敏体质的人因对过敏原敏感，容易产生紧张 、焦虑等情绪，因此要在尽量避免过敏原的同时，还应避免紧张情绪。</view>
				</view> -->
				<!-- 穴位 -->
				<!-- <view class="acupoint-item" id="section5">
					<text class="acupoint-l">【穴位】</text>
					<view class="acupoint-r">
						<text class="value">艾灸足三里，肺俞。</text>
						<view class="acupoint-image">
							<view class="acupoint-image-item">
								<image src="https://jht-public.oss-cn-shenzhen.aliyuncs.com/2024/8/019e1fb0-1d7f-4758-b2a4-0e278ba51e3c.png"></image>
							</view>
							<view class="acupoint-image-item">
								<image src="https://jht-public.oss-cn-shenzhen.aliyuncs.com/2024/8/019e1fb0-1d7f-4758-b2a4-0e278ba51e3c.png"></image>
							</view>
							<view class="acupoint-image-item">
								<image src="https://jht-public.oss-cn-shenzhen.aliyuncs.com/2024/8/019e1fb0-1d7f-4758-b2a4-0e278ba51e3c.png"></image>
							</view>
						</view>
					</view>
				</view> -->
				<!-- 经络 -->
				<!-- <view class="suggest-item" id="section6">
					<view class="label">【经络】</view>
					<view class="value">您是特禀兼夹气虚，需要调理的经络为补脾经、补肾经、补肺经。特禀先天不足，可以后天脾胃加强充养，先天之本肾加强充养，肺主气，通过补气固表，增强抵抗力</view>
				</view> -->
				<!-- 习惯 -->
				<!-- <view class="suggest-item" id="section7">
					<view class="label">【习惯】</view>
					<view class="value">起居要有规律，保持充足的睡眠时间。居室宜通风良好。生活环境中接触的物品应经常清洗、日晒。外出要避免接触过敏原。</view>
				</view> -->
				<view class="tip">注：报告仅供参考，具体情况以医生建议为准.</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	//引入请求文件
	import {listing} from '../../api/api.js'
	import {tongueDetail} from '../../api/request.js'
	export default{
		data(){
			return{
				tophight:{},
				tabData:['诊断结果','调理建议'],
				list:[
					// {name:'药膳'},
					// {name:'茶饮'},
					// {name:'微运动'},
					// {name:'艾灸理疗'},
					// {name:'按摩理疗'}
					
					// {name:'饮食'},
					// {name:'药膳'},
					// {name:'运动'},
					// {name:'情志'},
					// {name:'穴位'},
					// {name:'经络'},
					// {name:'习惯'}
				],
				tab1:{},
				tab2:{},
				tab3:{},
				tab4:{},
				tab5:{},
				tab6:{},
				tab7:{},
				tab8:{},
				adviceList:[],
				num: 0,
				detail:{},
				userdata:{},
				shexingDescription:'',
				taizhiDescription:'',
			}
		},
		onShow() {
			this.ifUser()
		},
		onLoad(e) {
			this.getDetail(e.id)
		},
		created() {
			// #ifdef MP-WEIXIN
			this.tophight = uni.getMenuButtonBoundingClientRect()
			// #endif
		},
		methods:{
			onBack(){
				uni.navigateBack(-1)
			},
			ifUser(){
				let user = uni.getStorageSync('user')
				if(!user) return
				this.userdata=JSON.parse(user)
			},
			onTabChange(e){
				let clsdata = ''
				if(e.index == 0){
					clsdata = '#id1'
				}
				if(e.index == 1){
					clsdata = '#id2'
				}
				if(e.index == 2){
					clsdata = '#id3'
				}
				if(e.index == 3){
					clsdata = '#id4'
				}
				if(e.index == 4){
					clsdata = '#id5'
				}
				if(e.index == 5){
					clsdata = '#id6'
				}
				if(e.index == 6){
					clsdata = '#id7'
				}
				if(e.index == 7){
					clsdata = '#id8'
				}
				let he = this.tophight.top + this.tophight.height
				const query = this.createSelectorQuery()
				query.select(clsdata).boundingClientRect()
				query.selectViewport().scrollOffset()
				query.exec((res)=>{
					uni.pageScrollTo({
						scrollTop: res[0].top + res[1].scrollTop - he,
						duration: 300
					})
				});
			},
			//获取报告详情
			getDetail(id){
				listing(tongueDetail+`?tongueId=${id}`)
				.then(res=>{
					if(res.data.code === 200){
						if(res.data?.data.adviceList.length > 0){
							this.list = res.data?.data.adviceList.map(v=>{
								return{
									name:v.categoryName
								}
							})
							this.adviceList = res.data?.data.adviceList
							this.tab1 = this.adviceList[0]
							this.tab2 = this.adviceList[1]
							this.tab3 = this.adviceList[2]
							this.tab4 = this.adviceList[3]
							this.tab5 = this.adviceList[4]
							this.tab6 = this.adviceList[5]
							this.tab7 = this.adviceList[6]
							this.tab8 = this.adviceList[7]
						}
						this.detail = res.data?.data
						this.shexingDescription = this.detail.diagnose.sheXingExplain.map(item => item.desc).join('');
						this.taizhiDescription = this.detail.diagnose.taiZhiExplain.map(item => item.desc).join('');
						
					}
				})
			},
			changeTab(index){
				this.num = index
			},
			previewImage(imageOrigin){
				uni.previewImage({
					current:1,
					urls:imageOrigin.split(',')
				})
			}
		}
		
	}
</script>

<style lang="scss" scoped>
	.container{
		background-image: url('https://jht-public.oss-cn-shenzhen.aliyuncs.com/2024/8/16fadf3b-2bad-4eb5-8b5f-a7bd0d402c08.png');
		background-size: contain;
		width: 100%;
		height: 100%;
		box-sizing: border-box;
		.status_title{
			position: relative;
			display: flex;
			color: #000;
			font-size: 36rpx;
			font-weight: bold;
			text{
				position: absolute;
				top: 0;
				left: 50%;
				transform: translateX(-50%);
			}
			.back-image{
				position: absolute;
				top: 0;
				left: 34rpx;
				width: 48rpx;
				height: 48rpx;
			}
		}
		.header{
			display: flex;
			justify-content: space-between;
			padding: 30rpx 34rpx 0;
			// margin-top: 30rpx;
			box-sizing: border-box;
			.h-left{
				display: flex;
				align-items: center;
				.avatar{
					margin-right: 16rpx;
					/deep/.u-image{
						width: 90rpx !important;
						height: 90rpx !important;
					}
					/deep/.u-image__image{
						width: 90rpx !important;
						height: 90rpx !important;
					}
					/deep/.u-image__error{
						width: 90rpx !important;
						height: 90rpx !important;
					}
				}
				.user-info{
					font-weight: 400;
					.name{
						font-size: 36rpx;
						color: #140F08;
						padding-bottom: 6rpx;
					}
					.date{
						font-size: 24rpx;
						color: #140F08B3;
					}
				}
			}
			.h-right{
				/deep/.u-image{
					width: 90rpx !important;
					height: 90rpx !important;
				}
				/deep/.u-image__image{
					width: 90rpx !important;
					height: 90rpx !important;
				}
				/deep/.u-image__error{
					width: 90rpx !important;
					height: 90rpx !important;
				}
			}
		}
		.banner{
			position: relative;
			display: flex;
			justify-content: center;
			margin: 52rpx 0 80rpx;
			/deep/.u-image{
				width: 400rpx !important;
				height: 400rpx !important;
			}
			/deep/.u-image__image{
				width: 400rpx !important;
				height: 400rpx !important;
			}
			/deep/.u-image__error{
				width: 400rpx !important;
				height: 400rpx !important;
			}
			/deep/.u-image__loading{
				width: 100% !important;
			}
			.banner-item1{
				position: absolute;
				top: 42rpx;
				left: 14rpx;
				color: #993000;
				max-width: 164rpx;
				padding: 10rpx 28rpx;
				border-radius: 30rpx;
				background: #fff;
			}
			.banner-item2{
				position: absolute;
				top: 6rpx;
				right: 40rpx;
				color: #993000;
				padding: 10rpx 28rpx;
				max-width: 164rpx;
				border-radius: 30rpx;
				background: #fff;
			}
			.banner-item3{
				position: absolute;
				bottom: 30rpx;
				left: 26rpx;
				color: #993000;
				padding: 10rpx 28rpx;
				max-width: 164rpx;
				border-radius: 30rpx;
				background: #fff;
			}
			.banner-item4{
				position: absolute;
				bottom: 0;
				right: 26rpx;
				color: #993000;
				padding: 10rpx 28rpx;
				max-width: 164rpx;
				border-radius: 30rpx;
				background: #fff;
			}
		}
		.footer{
			height: 100%;
			background: #fff;
			border-top-right-radius: 32rpx;
			border-top-left-radius: 32rpx;
			.tab-view{
				height: 120rpx;
				background: linear-gradient(180deg, #FFCEB5 0%, #fff 100%);
				border-top-right-radius: 32rpx;
				border-top-left-radius: 32rpx;
				box-sizing: border-box;
				padding: 8rpx;
				.tab-btn{
					display: flex;
					height: 100%;
					color: #140F08B3;
					font-size: 32rpx;
					font-weight: bold;
					.tab-item{
						position: relative;
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;
						flex: 1;
						height: 100%;
						box-sizing: border-box;
						.line{
							position: absolute;
							bottom: 16rpx;
							left: 50%;
							transform: translateX(-50%);
							width: 80rpx;
							height: 4rpx;
							background: #ff702a;
							border-radius: 6rpx;
						}
					}
					.active{
						background: #fff;
						color: #140F08;
						border-top-right-radius: 32rpx;
						border-top-left-radius: 32rpx;
					}
				}
			}
			.result-view{
				height: 100%;
				padding: 40rpx;
				// .scroll{
					// height: 100%;
					// height: 600rpx;
					// white-space: nowrap;
					// box-sizing: border-box;
					.head{
						display: flex;
						justify-content: space-between;
						align-items: center;
						.h-left{
							display: flex;
							align-items: center;
							.icon-tongue{
								width: 48rpx;
								height: 48rpx;
							}
							.label{
								font-size: 32rpx;
								font-weight: 700;
								color: #140F08;
								padding: 0 24rpx;
							}
							.status{
								display: inline-block;
								background-color: #00B35C;
								color: #fff;
								padding: 12rpx;
								border-radius: 6rpx;
							}
						}
						.score{
							font-size: 40rpx;
							font-family: bold;
							color: #B83A00;
						}
					}
					.title{
						font-size: 32rpx;
						font-weight: bold;
						color: #140F08;
						white-space: pre-line;
						line-height: 40rpx;
						margin-top: 50rpx;
					}
					.value{
						color: #140F08B3;
						font-size: 28rpx;
						font-weight: 400;
						white-space: pre-line;
						line-height: 40rpx;
						margin-top: 20rpx;
					}
					.result-list{
						margin-top: 36rpx;
						.result-item{
							background: #f7f5f0;
							padding: 20rpx;
							border-radius: 16rpx;
							margin-bottom: 20rpx;
							box-sizing: border-box;
							.result-t{
								.result-h{
									display: flex;
									justify-content: space-between;
									align-items: center;
									font-size: 28rpx;
									font-weight: bold;
									&-l{
										position: relative;
										padding-left: 16rpx;
										color: #140F08;
										text{
											color: #993000;
										}
									}
									&-l::before{
										content: '';
										position: absolute;
										left: 0;
										top: 0;
										height: 100%;
										width: 8rpx;
										background: #B83A00;
									}
									.result-status{
										display: flex;
										align-items: center;
										.status-image{
											width: 40rpx;
											height: 40rpx;
											margin-right: 10rpx;
										}
										.validity{
											color: #00B35C;
										}
										.error{
											color: #FF293B;
										}
									}
								}
								.line-progress{
									position: relative;
									width: 100%;
									margin-top: 32rpx;
									border-bottom: 1rpx solid #140F081A;
									padding-bottom: 32rpx;
									.line1{
										height: 12rpx;
										border-radius: 6rpx;
										background: linear-gradient(90deg,#fff 0%,#fff 20%,#FFD9D1 20%,#FFD9D1 40%,#F29485 40%,#F29485 60%,#FF5765 60%,#FF5765 80%,#7557B7 80%,#7557B7 100%);
									}
									.line2{
										height: 12rpx;
										border-radius: 6rpx;
										background: linear-gradient(90deg,#fff 0%,#fff 33.33%,#D6B47C 33.33%,#D6B47C 66.66%,#B0B0B0 66.66%,#B0B0B0 100%);
									}
									.round{
										position: absolute;
										left: 50%;
										top: -6rpx;
										transform: translateX(-50%);
										width: 24rpx;
										height: 24rpx;
										border-radius: 50%;
										background: #fff;
									}
									.line-value1{
										display: flex;
										justify-content: space-around;
										align-items: center;
										margin-top: 24rpx;
										&-item{
											font-size: 24rpx;
											color: #140F08B3;
										}
									}
									.line-value2{
										display: flex;
										justify-content: space-around;
										align-items: center;
										margin-top: 24rpx;
										padding-left: 24rpx;
										&-item{
											font-size: 24rpx;
											color: #140F08B3;
										}
									}
								}
							}
							.result-b{
								font-size: 28rpx;
								font-weight: bold;
								margin-top: 32rpx;
								.label{
									white-space: pre-line;
									line-height: 40rpx;
									margin-bottom: 32rpx;
								}
								.explain{
									white-space: pre-line;
									line-height: 40rpx;
								}
							}
							&:last-child{
								margin-bottom: 40rpx;
							}
						}
					}
					.tip{
						font-size: 20rpx;
						color: #140F0880;
						font-weight: 400;
						text-align: center;
						margin-bottom: 20rpx;
					}
				}
			// }
			.suggest-view{
				height: 100%;
				padding: 40rpx;
				.tab-wrap{
					margin-bottom: 40rpx;
				}
				.medicated-view{
					display: flex;
					font-size: 28rpx;
					font-weight: 400;
					margin-bottom: 40rpx;
					// margin-top: 60rpx;
					box-sizing: border-box;
					.label{
						// width: 112rpx;
						width: 162rpx;
						font-weight: 500;
						color: #140F08;
					}
					.medicated-list{
						flex: 1;
						.medicated-item{
							margin-bottom: 60rpx;
							.medicated-head{
								position: relative;
								display: flex;
								justify-content: space-between;
								margin-bottom: 40rpx;
								// align-items: center;
								&-l{
									display: flex;
									flex-direction: column;
									.name{
										font-weight: 500;
										color: #140F08;
										margin-bottom: 10rpx;
										
									}
									.dec{
										font-size: 24rpx;
										color: #AD4B3C;
									}
								}
								&-r{
									position: absolute;
									right: 0;
									bottom: -40rpx;
									image{
										width: 160rpx;
										height: 160rpx;
									}
								}
							}
							.batching{
								flex: 1;
								color: #140F08B3;
								white-space: pre-line;
								margin-bottom: 20rpx;
							}
							.practice{
								flex: 1;
								color: #140F08B3;
								white-space: pre-line;
							}
							&:last-child{
								margin-bottom: 16rpx;
							}
						}
					}
				}
				.acupoint-item{
					display: flex;
					font-size: 28rpx;
					font-weight: 400;
					margin-bottom: 20rpx;
					box-sizing: border-box;
					.acupoint-l{
						width: 112rpx;
						font-weight: 500;
						color: #140F08;
					}
					.acupoint-r{
						flex: 1;
						.value{
							flex: 1;
							color: #140F08B3;
							white-space: pre-line;
						}
						.acupoint-image{
							display: flex;
							flex-wrap: wrap;
							margin-top: 20rpx;
							&-item{
								width: 48%;
								height: 128rpx;
								margin: 0 20rpx 20rpx 0;
								image{
									width: 100%;
									height: 100%;
								}
								&:nth-child(2n){
									margin-right: 0;
								}
							}
						}
					}
				}
				.suggest-item{
					display: flex;
					font-size: 28rpx;
					font-weight: 400;
					margin-bottom: 40rpx;
					box-sizing: border-box;
					.label{
						width: 112rpx;
						font-weight: 500;
						color: #140F08;
					}
					.value{
						flex: 1;
						color: #140F08B3;
						white-space: pre-line;
						
					}
					.medicated-view{
						.medicated-food{
							.medicated-head{
								display: flex;
								align-items: center;
								color: #140F08B3;
								.head-l{
									display: flex;
									flex-direction: column;
									.name{
										font-weight: 500;
										color: #140F08;
										white-space: pre-line;
									}
									.dec{
										font-size: 24rpx;
										color: #AD4B3C;
										white-space: pre-line;
									}
								}
								.head-r{
									image{
										width: 160rpx;
										height: 160rpx;
									}
								}
							}
							.batching{
								white-space: pre-line;
							}
							.practice{
								white-space: pre-line;
							}
						}
					}
				}
				.tip{
					font-size: 20rpx;
					color: #140F0880;
					font-weight: 400;
					text-align: center;
					margin-bottom: 20rpx;
				}
			}
		}
	}
</style>